import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import "./index.css";
import axios from "axios";
const Index: React.FC = () => {
  const [city, setCity] = useState<any>([]);
  const [tabIndex, setTabIndex] = useState<number>(0);
  const navigate = useNavigate();
  const render = () => {
    axios.get("/api/city").then((resp) => {
      setCity(resp.data.city);
    });
  };
  const bindchange = (index: number) => {
    setTabIndex(index);
  };
  const sure = (item: string) => {
    localStorage.setItem("city", item.county);
    navigate("/home/micromedicine");
  };
  useEffect(() => {
    render();
  }, []);
  return (
    <div className="wrap">
      <div className="left">
        {city.length > 0 &&
          city.map((item, index) => (
            <div
              className={index == tabIndex ? "active" : ""}
              onClick={() => bindchange(index)}
            >
              {item.title}
            </div>
          ))}
      </div>
      <div className="right">
        {city.length > 0 &&
          city[tabIndex].children.map((item, index) => (
            <div onClick={() => sure(item)}>{item.county}</div>
          ))}
      </div>
    </div>
  );
};
export default Index;
